<template>
  <div class="hello">
    我是父组件
    动态标题：<input v-model="title">
     
    
    <child ref="child" :title="title" :title2="title"  @fatherEvent="fatherMethod">
     <br> 
      <span>我在父组件父组件插槽动态扩展</span>
      <el-button type="primary"  >启用 </el-button>
      <el-button type="primary"   >禁用 </el-button>
      <br> 
    </child>   
    <el-button type="primary" @click="childMethd"  >调用子组件方法 </el-button>
  </div>
</template>

<script>
import child from './child.vue'
export default {
    name: 'HelloWorld',
    components: {
        child: child
    },
    data() {
        return {
            title: ''
        }
    },
    methods: {
        fatherMethod() {
            alert('我是父方法')
        },
        childMethd() {
            alert('我是父组件方法')
            this.$refs.child.child()
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
